<template>
  <div class="app-container">
    <div>
      <el-button type="primary" plain @click="showTongzhiDialog">工作通知</el-button>
    </div>
    <!-- {{list}} -->
    <div style="padding: 10px" />
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="通知时间" align="center" width="110px">
        <template slot-scope="scope">
          {{ getFormatedTimeStr(scope.row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column label="主题" align="center">
        <template slot-scope="scope">
          {{ scope.row.zhuti }}
        </template>
      </el-table-column>

      <el-table-column label="内容" align="center">
        <template slot-scope="scope">
          {{ scope.row.neirong }}
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-image style="width: 48px; height: 48px" :src=" scope.row.pics[0]" :preview-src-list=" scope.row.pics" />

        </template>
      </el-table-column>

      <el-table-column label="相关附件" align="center">
        <template slot-scope="scope">
          <p v-for="(item,index) in scope.row.attaches " :key="index" style="">
            <el-link :href="item.path" type="primary" target="_blank">{{ item.name }}</el-link>
          </p>
        </template>
      </el-table-column>

    </el-table>

    <div style="padding: 10px" />
    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageCount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataTotal"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />

    <el-dialog
      :visible.sync="tongzhiDialog.visible"
      width="30%"
      :close-on-click-modal="false"
      top="5vh"
      center
      :show-close="false"
    >
      <div>
        <el-form ref="form" size="mini" label-position="left" label-width="100px">
          <el-row>
            <!-- 左侧 -->
            <el-col :span="24">
              <div class="title"><i class="el-icon-document" />工作通知</div>
              <el-form-item label="主题">
                <el-input v-model="tongzhiDialog.zhuti" />
              </el-form-item>
              <el-form-item label="内容">
                <el-input v-model="tongzhiDialog.neirong" />
              </el-form-item>

              <el-form-item label="分发范围">
                <el-cascader v-model="tongzhiDialog.readers" :options="userList" :props="props" clearable style="width: 100%;" />
              </el-form-item>

              <el-form-item label="图片">
                <el-upload
                  ref="uploadpic"
                  :action="uploadconfig.url"
                  :before-upload="beforePicUpload"
                  list-type="text"
                >
                  <el-button size="mini" type="primary" plain>点击上传图片</el-button>
                </el-upload>
              </el-form-item>

              <el-form-item label="附件">
                <el-upload ref="attaches" :action="uploadconfig.url" :on-success="uploadAttachSuccess" multiple>
                  <el-button size="mini" type="primary" plain>点击上传附件</el-button>
                </el-upload>
              </el-form-item>

            </el-col>
          </el-row>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tongzhiDialog.visible = false">关 闭</el-button>
        <el-button type="primary" @click="clickApply()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { websock } from '@/websock'
import { uploadconfig } from '@/const'

import moment from 'moment'

export default {
  filters: {
    statusFilter(sta) {
      const statusMap = {
        1: 'info',
        2: 'success',
        3: 'danger'
      }
      return statusMap[sta]
    }
  },
  data() {
    return {
      uploadconfig,
      // 人员列表样式(多选)
      props: {
        multiple: true
      },
      // 人员列表数据
      userList: [],
      list: null,
      listLoading: true,
      pageIndex: 1,
      pageCount: 10,
      dataTotal: 0,
      // 添加员工
      tongzhiDialog: {
        visible: false,
        zhuti: '',
        neirong: '',
        pics: [],
        readers: [],
        attaches: []
      }
    }
  },
  async created() {
    this.getList()

    const res = await websock.getContactList()
    console.log('created', res)
    const userList = []
    for (let i = 0; i !== res.length; i++) {
      userList.push({
        value: i + '',
        label: res[i].name,
        children: []
      })
      for (let j = 0; j !== res[i].userList.length; j++) {
        userList[i].children.push({
          value: JSON.stringify({
            uid: res[i].userList[j].uid,
            name: res[i].userList[j].name
          }),
          label: res[i].userList[j].name
        })
      }
    }
    this.userList = userList
  },
  methods: {
    // 获取格式化时间字符串
    getFormatedTimeStr(stamp, str = 'MM-DD HH:mm') {
      return moment(stamp).format(str)
    },
    getList() {
      this.listLoading = true
      websock.gongzuoTongzhiRecordWeb({
        pageIndex: this.pageIndex,
        pageCount: this.pageCount
      }).then(
        (data) => {
          this.listLoading = false
          this.list = data.list
          this.dataTotal = data.count
        }
      )
    },
    uploadAttachSuccess(res, file) {
      console.log('upload attach success', res, file)
      if (res.code !== 0) {
        return this.$message.error(res.message)
      }
      this.tongzhiDialog.attaches.push({
        name: file.name,
        path: res.data
      })
    },
    beforePicUpload(file) {
      const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
      console.log('before pic upload', file.type)
      if (!isPic) this.$message.error('只能上传jpg或png格式')
      return isPic
    },
    handleRemovePic(file) {
      const fileList = this.$refs.uploadpic.uploadFiles
      console.log(fileList)
      const index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid
      })
      fileList.splice(index, 1)
    },
    clickAddItem() {
      this.tongzhiDialog.neirongs.push('')
    },
    onPageSizeChange(val) {
      this.pageCount = val
      this.getList()
    },
    onCurrentPageChange(val) {
      this.pageIndex = val
      this.getList()
    },
    // 显示添加员工界面
    showTongzhiDialog() {
      this.tongzhiDialog.visible = true
      this.tongzhiDialog.zhuti = ''
      this.tongzhiDialog.neirong = ''
      this.tongzhiDialog.readers = []
      this.tongzhiDialog.attaches = []
      if (this.$refs.attaches) this.$refs.attaches.uploadFiles = []
    },
    labelName(idx) {
      return '内容' + (idx + 1)
    },
    async clickApply() {
      if (!this.tongzhiDialog.zhuti) return this.$message.error('请输入会议主题')
      if (!this.tongzhiDialog.neirong) return this.$message.error('请输入会议内容')
      if (this.tongzhiDialog.readers.length == 0) return this.$message.error('请选择参会人员')

      const readers = []
      for (let i = 0; i != this.tongzhiDialog.readers.length; i++) {
        readers.push(JSON.parse(this.tongzhiDialog.readers[i][1]))
      }

      const pics = []
      const fileList = this.$refs.uploadpic.uploadFiles
      for (let i = 0; i != fileList.length; i++) {
        pics.push(fileList[i].response.data)
      }

      await websock.newGongzuoTongzhi({
        zhuti: this.tongzhiDialog.zhuti,
        neirong: this.tongzhiDialog.neirong,
        readers,
        pics,
        attaches: this.tongzhiDialog.attaches
      })

      this.$message.success('申请成功,等待审核')

      this.tongzhiDialog.visible = false

      this.getList()
    },
    async revertApply(idx) {
      try {
        await websock.revertHetongShenpi({
          id: this.list[idx].id
        })
        this.list[idx].sta = 4
        this.getList()
      } catch (err) {
        console.error(err)
        this.$message.error({
          title: err.message || 'error'
        })
      }
    }
  }
}
</script>

<style>
  @import url("../../styles/form.css");
</style>
